<template>
  <!-- <div class="container" style="width: 100%; height: 100%;"> -->
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span class="active">公告列表</span>
    </div>

    <el-row>
      <el-col :span="4">
        <span>关键字：</span>
        <el-input class="searchInp" placeholder="请输入内容" v-model="query.key"></el-input>
      </el-col>
      <el-col :span="4">
        <span>分类：</span>
        <el-select v-model="query.type" placeholder="请选择分类" clearable>
          <el-option label="全部分类" value=""></el-option>
          <el-option 
            v-for="item in typeList" 
            :key="item.id" 
            :label="item.name" 
            :value="item.id">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-button type="primary" class="searchbtn" size="small" @click="search">查询</el-button>
      </el-col>
    </el-row>
    <el-row :gutter="10" class="btns">
      <el-button type="success" class="searchbtn" size="small" @click="$router.push('/news/add')">添加</el-button>
      <el-button type="danger" class="searchbtn" size="small" @click="handleDeleteAll">批量删除</el-button>
    </el-row>

    <!--  表格 -->

    <BaseTable :tableColumn="tableColumn" :tableData="tableData" :loading="loading" :isShowSelection="true" @selection-change="handleSelectionChange">
      <template #options="{ row }">
        <el-button size="small" @click="handleEdit(row)" type="success">修改</el-button>
        <el-button size="small" @click="handleDelete(row)" type="danger">删除</el-button>
      </template>
    </BaseTable>
    <!-- 分页 -->
    <el-pagination
      class="pagination"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="query.page"
      :page-sizes="[5, 10, 20, 50]"
      :page-size="query.psize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="counts"
    >
    </el-pagination>
  </el-card>
  <!-- </div> -->
</template>

<script>
import { list, del, delAll, newstypelist } from '../api/news'
import BaseTable from '@/components/BaseTable.vue'
export default {
  name: 'NewsView',
  components: {
    BaseTable,
  },
  data() {
    return {
      loading: true,
      query: {
        page: 1,
        psize: 5,
        key: '',
        type: '',
      },
      counts: 0,
      tableColumn: [
        {
          prop: 'id',
          label: 'ID',
          width: 180,
        },
        {
          prop: 'title',
          label: '标题',
          width: 180,
          slotname: 'title',
        },
        {
          prop: 'typename',
          label: '分类',
        },
        {
          prop: 'picture',
          label: '图片',
          slotname: 'picture',
        },
        {
          prop: 'state',
          label: '状态',
          slotname: 'state',
        },
        {
          prop: 'addtime',
          label: '发布时间',
          slotname: 'addtime',
        },
        {
          prop: 'edituser',
          label: '发布人',
        },
        {
          prop: 'options',
          label: '操作',
          slotname: 'options',
        },
      ],
      gridData: [],
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: '',
      },
      formLabelWidth: '120px',

      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      formInline: {
        user: '',
        region: '',
      },
      tableData: [],
      multipleSelection: [],
      typeList: []
    }
  },

  methods: {
    async getList() {
      this.loading = true
      try {
        let {
          data: { counts, list: listData },
        } = await list(this.query)
        this.counts = counts
        this.tableData = listData
        this.loading = false
        console.log('获取到的数据:', listData)
      } catch (error) {
        console.error('获取数据失败:', error)
      }
    },
    async getTypeList() {
      try {
        const res = await newstypelist({ page: 1, psize: 1000 })
        this.typeList = res.data.list || []
      } catch (error) {
        console.error('获取分类列表失败:', error)
        this.$message.error('获取分类列表失败!')
      }
    },
    onSubmit() {
      console.log('查询表单提交:', this.formInline)
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
      console.log('选中项发生变化:', val)
    },
    handleEdit(row) {
      console.log('编辑操作:', row)
      this.$router.push('/news/add/' + row.id)
    },
    async handleDelete(row) {
      try {
        await this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
        await del({ id: row.id })
        await this.getList()
        this.$message({
          type: 'success',
          message: '删除成功!',
        })
      } catch (error) {
        if (error === 'cancel') {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        } else {
          console.error('删除失败:', error)
        }
      }
    },

    async handleDeleteAll() {
      if (!this.multipleSelection.length) {
        this.$message({
          type: 'warning',
          message: '请选择要删除的记录!',
        })
        return
      }

      try {
        await this.$confirm('此操作将永久删除选中的记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })

        const ids = this.multipleSelection.map((item) => item.id)
        await delAll({ ids: ids })
        await this.getList()
        this.$message({
          type: 'success',
          message: '删除成功!',
        })
      } catch (error) {
        if (error === 'cancel') {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        } else {
          console.error('删除失败:', error)
          this.$message({
            type: 'error',
            message: '删除失败!',
          })
        }
      }
    },
    handleSizeChange(val) {
      this.query.psize = val
      this.query.page = 1
      this.getList()
    },
    handleCurrentChange(val) {
      this.query.page = val
      this.getList()
    },
    search() {
      this.query.page = 1
      this.getList()
    },
  },

  created() {
    this.getList()
    this.getTypeList()
  },
}
</script>

<style lang="less" scoped>
@import url(../assets/css/administrator.less);
@import url(../assets/css/search.less);

.searchInp {
  width: 200px;
  margin-right: 10px;
}

.el-select {
  width: 200px;
  margin-right: 10px;
}
</style>
